<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>阴影</title>

        <style type="text/css">
            .wrapper {
                height: 100px ;
                width: 200px ;
                margin: 50px auto ;
                border: 1px dashed blue;
            }

            /* box-shadow : 水平偏移  垂直偏移  阴影距离  模糊距离  阴影颜色 */
            .first { box-shadow: 10px 10px 10px 10px red ; }

            .second { box-shadow: 0 0 10px 0 red ; }

            .third { box-shadow: 0 0 10px 0 red inset ; }

            .fourth { box-shadow: 0 0 10px red ; }

            .fifth { box-shadow: 0 10px 15px -10px red;}

        </style>

    </head>
    <body>

        <div class="wrapper first"></div>

        <hr>

        <div class="wrapper second"></div>

        <hr>

        <div class="wrapper third"></div>

        <hr>

        <div class="wrapper fourth"></div>

        <hr>

        <div class="wrapper fifth"></div>

        <hr>

        <style type="text/css">
            .sixth {
                box-shadow: 0 -5px 10px -5px red , 
                            0 5px 10px -5px blue ,
                            -5px 0 10px -5px purple ,
                            5px 0 10px -5px green ;
                border-radius: 50% ;
                height: 300px ;
                width: 300px ;
                border: none ;
            }
        </style>

        <div class="wrapper sixth"></div>
        
    </body>
</html>